<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQTouch &beta;</title>

<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/apple/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>



<script type="text/javascript">

$.jQTouch({
    icon: 'jqtouch.png',
    statusBar: 'black-translucent',
    preloadImages: [
        'themes/jqt/img/chevron_white.png',
        'themes/jqt/img/bg_row_select.gif',
        'themes/jqt/img/back_button_clicked.png',
        'themes/jqt/img/button_clicked.png'
        ]
});






</script>


</head>
<body>
		<div id="home" class="current">
            <div class="toolbar">
                <h1>jQTouch</h1>
                <a class="button slideup" id="infoButton" href="#about">About</a>
            </div>
            <ul class="rounded">
                <li class="arrow"><a href="#budgets">Budgets</a> <small class="counter">3</small></li>
                <li class="arrow"><a href="#Goals">Goals</a> <small class="counter">8</small></li>
                <li class="arrow"><a href="#ajax">Incomes</a> <small class="counter">3</small></li>
                <li class="arrow"><a href="#callbacks">Out Comes</a> <small class="counter">3</small></li>
                <li class="arrow"><a href="#extensions">Summary & Analysis</a> </li>
            </ul>
            <div class="info">
                <p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
            </div>
        </div>
        
        
        <div id="budgets">
        	<div class="toolbar">
        	 	<a href="#" class="back">Back</a>
                <h1>Budgets</h1>
                <a class="button slideup" id="infoButton" href="#budgetform">+</a>
            </div>
        	  <ul class="rounded">
                <li class=""><a href="#budgets">Entertainments</a> <small class="counter">$120</small></li>
                <li class="arrow"><a href="#animations">Animations</a> <small class="counter">8</small></li>
                <li class="arrow"><a href="#ajax">AJAX</a> <small class="counter">3</small></li>
                <li class="arrow"><a href="#callbacks">Callback Events</a> <small class="counter">3</small></li>
                <li class="arrow"><a href="#extensions">Extensions</a> <small class="counter">4</small></li>
                <li class="arrow"><a href="#demos">Demos</a> <small class="counter">2</small></li>
            </ul>
        </div>
        
        <div id="budgetform">
        	<div class="toolbar">
                <h1>Add a budgets</h1>
                <a href="#" class="back">Back</a>
            </div>
            <form>
                <ul class="edit rounded">
                	<li>Choose a Category</li>
                    <li>
                        <select id="lol">
                            <optgroup label="UTILITIES">
                                <option value ="Electricity">Electricity</option>
                                <option value ="Water and Sewer">Water and Sewer</option>
                            </optgroup>
                            <optgroup label="HEALTH AND MEDICAL">
                                <option value ="mercedes">Insurance (medical,dental,vision)</option>
                                <option value ="audi">Audi</option>
                            </optgroup>
                        </select>
                    </li>
                    <li><input type="text" name="name" placeholder="BUDGET AMOUNT" id="some_name" /></li>
                </ul>
            </form>
            
            <ul class="individual">
                <li><a href="#budgets" target="_blank">Create</a></li>
                <li><a href="http://tinyurl.com/support-jqt" target="_blank">Delete</a></li>
            </ul>
        </div>
</body>
</html>